<template>
    <div class="netteach-add">
        <div class="netteach-crumbs">
            <router-link to="/netteach">网络教研</router-link>
            <span><i>></i>发起评课</span>
        </div>
        <div class="netteach-add-content">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动主题" prop="theme">
                    <el-input v-model.trim="ruleForm.theme" placeholder="最多可以输入20个字符" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="活动要求" prop="ask">
                    <el-input type="textarea" v-model.trim="ruleForm.ask" :rows="4" placeholder="在此可输入活动要求(最多200字)" maxlength="200"></el-input>
                    <span class="word-number"><i>{{ruleForm.ask.length}}</i>/200</span>
                </el-form-item>
                <el-form-item label="评课视频" prop="video">
                    <el-button type="primary" @click="getVideoData(true)">选择</el-button>
                    <div class="tagList">
                        <el-tag :key="index" v-for="(tag, index) in videoList" closable :disable-transitions="false" @close="handleClose(index, 'video')">
                            {{tag.video_name}}
                        </el-tag>
                    </div>
                    <el-checkbox-group v-model="ruleForm.video" class='hide'>
                        <el-checkbox :label="item.id" name="type" :key="index" v-for="(item, index) in videoList" checked>{{item.video_name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="活动时间" required class="date-time">
                    <el-form-item prop="startTime">
                        <el-date-picker v-model="ruleForm.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options='pickerOptions' placeholder="选择开始时间"></el-date-picker>
                    </el-form-item>
                    <i>至</i>
                    <el-form-item prop="endTime">
                        <el-date-picker v-model="ruleForm.endTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" :picker-options='pickerOptions' placeholder="选择结束期时间"></el-date-picker>
                    </el-form-item>
                </el-form-item>
                <!-- 多级-参与人 -->
                <el-form-item label="参与人" prop="participant" v-if="isMulti">
                    <el-button type="primary" @click="participantMulti">选择</el-button>
                    <div class="participant-container" v-if="idsChecked.length > 0">
                        <p>已选中的参与人</p>
                        <template v-for="item of checkedData">
                            <div class="tree-top-level" :key="item.app_code" v-if="item.children.length > 0">
                                <div class="row">
                                    <label>{{ item.name }}：</label>
                                </div>
                                <el-tag size="small" closable v-for="member in item.children" :key="member.id" @close="cancelCheck(member)">{{ member.name }}</el-tag>
                            </div>
                        </template>
                    </div>
                    <el-checkbox-group v-model="ruleForm.participant" class='hide' style="display:none;">
                        <el-checkbox :label="item.id" name="type" :key="index" v-for="(item, index) in participantList" checked>{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                    <!-- <el-input v-model="ruleForm.participant" style="display:none;"></el-input> -->
                </el-form-item>

                <!-- 单级-参与人 -->
                <el-form-item label="参与人" prop="participant" v-else>
                    <el-button type="primary" @click="participantShow()">选择</el-button>
                    <div class="tagList">
                        <el-tag :key="index" v-for="(tag, index) in participantList" closable :disable-transitions="false" @close="handleClose(index, 'participant',tag)">
                            {{tag.name}}
                        </el-tag>
                    </div>
                    <el-checkbox-group v-model="ruleForm.participant" class='hide'>
                        <el-checkbox :label="item.id" name="type" :key="index" v-for="(item, index) in participantList" checked>{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>



                <el-form-item label="评估标准" prop="standard">
                    <el-button type="primary" @click="standardShow()">选择</el-button>
                    <!-- <router-link target="_blank"  to="/netteach/standard">评课标准管理</router-link> -->
                    <el-button type="text" @click="toNetteach">评课标准管理</el-button>
                    <div class="tagList">
                        <el-tag :key="index" v-for="(tag, index) in standardList" closable :disable-transitions="false" @close="handleClose(index, 'standard')">
                            {{tag.name}}
                        </el-tag>
                    </div>
                    <el-checkbox-group v-model="ruleForm.standard" class='hide'>
                        <el-checkbox :label="item.id" name="type" :key="index" v-for="(item, index) in standardList" checked>{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="算分方式" prop="mode">
                    <el-radio-group v-model="ruleForm.mode">
                        <el-radio :label="0">全部相加法：全部相加平均数</el-radio>
                        <el-radio :label="1">去除首尾法：参与人大于等于5的时候，去掉最大值和最小值后，相加求平均数；小于5则全部相加求平均数</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="评分明细公开范围" prop="range" class="netteach-range">
                    <el-checkbox-group v-model="ruleForm.range">
                        <el-checkbox label="0" name="type">发起方</el-checkbox>
                        <el-checkbox label="1" name="type">主讲教师</el-checkbox>
                        <el-checkbox label="2" name="type">参与人</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item class="netteach-btn">
                    <el-button @click="goBack" type="primary" plain>取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="选择视频" top="5vh" :visible.sync="videoVisible" width="800px" :close-on-click-modal="false" custom-class="video-visible">
            <div class="video-keyword">
                <!-- 多级 -->
                <template v-if="isMulti">
                    <vCascader v-model="org" :options="orgData"></vCascader>
                    <el-select v-model="classifyVal" placeholder="选择分类" clearable @change="changseVideoClassify">
                        <el-option v-for="item in videoClassify" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input placeholder="视频名、教师名" suffix-icon="el-icon-search" v-model="keyword" @change="changseVideoClassify">
                    </el-input>
                </template>
                <!-- 单级 -->
                <template v-else>
                    <el-input placeholder="视频名" suffix-icon="el-icon-search" v-model="keyword" @change="changseVideoClassify">
                    </el-input>
                </template>

            </div>
            <el-table :data="videoData" border style="width: 100%" ref="multipleTable" tooltip-effect="dark" @selection-change="selectionChange"
             :row-key="getRowKeys" :row-class-name="videoRowClassName">
                <el-table-column type="selection" width="40" :reserve-selection="true" :selectable="checkVideo">
                </el-table-column>
                <el-table-column prop="video_name" label="视频名" show-overflow-tooltip align='center'>
                </el-table-column>
                <el-table-column v-if="isMulti" prop="category" label="学校" show-overflow-tooltip align='center'>
                </el-table-column>
                <el-table-column prop="cate_name" label="视频分类" show-overflow-tooltip align='center'>
                </el-table-column>                
                <el-table-column prop="user_name" label="上传者" show-overflow-tooltip align='center'>
                </el-table-column>
                <el-table-column prop="type_name" label="视频信息" show-overflow-tooltip align='center'>
                </el-table-column>
                <el-table-column label="操作" width="80px" align='center'>
                    <template slot-scope="scope">
                        <el-button type="text" class="video-preview" :disabled="setDisabled(scope.row)" @click="preview(scope.row.rtmp_url)">预览</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="pageIndex" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSum">
            </el-pagination>
            <div class="video-btn">
                <el-button type="primary" plain  @click="videoVisible = false">取消</el-button>
                <el-button type="primary" @click="submitVideo()">确定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="视频预览"  :visible.sync="isVideoView" width="800px" :close-on-click-modal="false" :before-close='closeVideo'>
            <videoAlertView v-if="showVideoPlayer" class="maxW train-video-player" :playParam.sync="playParam"></videoAlertView>
        </el-dialog>

        <!-- 单级的选择参选人弹窗 -->
        <el-dialog title="选择参与人" top="5vh" :visible.sync="participantVisible" width="800px" :close-on-click-modal="false" custom-class="video-visible">
            <div class="video-keyword">
                <el-select v-model="roleVal" placeholder="选择参与人角色" @change="getParticipant">
                    <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-input placeholder="用户名" suffix-icon="el-icon-search" v-model="keyword2" @change="getParticipant">
                </el-input>
            </div>
            <el-table :data="participantData" border style="width: 100%" ref="multipleTable2" tooltip-effect="dark" @selection-change="participantChange" :row-key="getRowKeys"  :row-class-name="particRowClassName">
                <el-table-column type="selection" width="40" :reserve-selection="true" :selectable="checkParticipant">
                </el-table-column>
                <el-table-column prop="number" label="登录帐号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="用户名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="role_name" label="角色" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="sex_name" label="性别" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChange2" @current-change="currentChange2" :current-page="pageIndex2" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="totalSum2">
            </el-pagination>
            <div class="video-btn">
                <el-button type="primary" plain @click="participantVisible = false">取消</el-button>
                <el-button type="primary" @click="submitParticipant()">确定</el-button>
            </div>
        </el-dialog>

        <!-- 多级的选择参选人弹窗 -->
        <el-dialog title="选择参与人" top="5vh" :visible.sync="multiVisible" :close-on-click-modal="false" @close="multiVisible = false" custom-class="participant-dialog">
            <orgTree ref="organization" titleTxt='参与人' v-if="multiVisible"></orgTree>
            <div class="video-btn">
                <el-button type="primary" plain @click="multiVisible = false">取消</el-button>
                <el-button type="primary" @click="checkMember()">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择评估标准" top="5vh" :visible.sync="standardVisible" width="800px" :close-on-click-modal="false" custom-class="video-visible">
            <div class="video-keyword">
                <!-- 多级 -->
                <template v-if="isMulti">
                    <el-select v-model="classify" placeholder="请选择分类" @change="changeStandard" @clear="classify=''" clearable>
                        <el-option
                            v-for="item in classifyData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </template>
                <!-- 单级 -->
                <template v-else>
                    <el-select v-model="subject" placeholder="请选择科目" @change="changeStandard" @clear="subject=''" clearable>
                        <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </template>

                <el-input placeholder="用户名" suffix-icon="el-icon-search" v-model="keyword3" @change="changeStandard">
                </el-input>
            </div>
            <el-table :data="standardData" border style="width: 100%"    @current-change="handleCurrentChange" @row-click="showStandardradio" :row-class-name="standardRowClassName">
                <el-table-column type="index" width="50" align="center">
                    <template slot-scope="scope" >
                        <el-radio class="radio" v-model="standardradio" :label="scope.$index">&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="标准名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="user_name" label="撰写者" show-overflow-tooltip>
                </el-table-column>

                <el-table-column prop="classify_name" label="分类名" show-overflow-tooltip v-if="isMulti">
                </el-table-column>

                <el-table-column prop="subject_name" label="科目名" show-overflow-tooltip v-else>
                </el-table-column>

                <el-table-column prop="total_score" label="总分" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="use_count" label="使用次数" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="80px" align='center'>
                    <template slot-scope="scope">
                        <el-button class="video-preview" @click="viewCriteriaShow(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChange3" @current-change="currentChange3" :current-page="pageIndex3" :page-sizes="[10, 50, 100, 200, 300, 400]" :page-size="pageSize3" layout="total, sizes, prev, pager, next, jumper" :total="totalSum3">
            </el-pagination>
            <div class="video-btn">
                <el-button type="primary" plain @click="standardVisible = false">取消</el-button>
                <el-button type="primary" @click="submitStandard()">确定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="查看评分标准" :visible.sync="viewCriteria" width="800px" :close-on-click-modal="false">
            <div class="substandard-title">
                <span>撰写人: {{viewCriteriaList.user_name}}</span>
                <span>分数: {{viewCriteriaList.total_score}}</span>
            </div>
            <template>
                <table class="standard-item">
                    <tr>
                        <th>评分标准</th>
                        <th>评分项</th>
                        <th>分数</th>
                    </tr>
                    <template v-for="(item, index) of viewCriteriaList.standard_item">
                        <template v-if="item.child.length === 0">
                            <tr>
                                <td>{{item.name}}</td>
                                <td>--</td>
                                <td>{{item.score}}</td>
                            </tr>
                        </template>
                        <template v-else>
                            <tr v-for="(child, index2) of item.child">
                                <td :rowspan="item.child.length" v-if="index2 === 0">{{item.name}}</td>
                                <td>{{child.name}}</td>
                                <td>{{child.score}}</td>
                            </tr>
                        </template>
                    </template>
                </table>
            </template>
        </el-dialog>
    </div>
</template>
<script>

import videoAlertView from "@/components/common/nativeVideo";
import orgTree from "@/components/common/organization-tree";
import vCascader from "@/components/common/custom-cascader";

export default {
    components: {
        videoAlertView,
        orgTree,
        vCascader
    },
    data() {
        return {
            ruleForm: {
                theme: '',
                ask: '',
                video: [],
                startTime: new Date(),
                endTime: new Date(),
                participant: [],//单级-参与人id的数组
                standard: [],
                mode: '',
                range: []
            },
            multipleSelection: [],
            multipleSelection2: [],
            multipleSelection3: [],

            classify: '',
            classifyData: [],

            optionProps: {
                value: 'grade_id',
                label: 'name',
                checkStrictly: true,
                expandTrigger: 'click'
            },

            keyword: '',
            videoVisible: false,
            videoView: false,
            videoData: [],
            pageIndex: 1,
            pageSize: 10,
            totalSum: 0,
            videoList: [],
            videoListId: [],

            roleList: [],
            roleVal: '',
            participantVisible: false,
            keyword2: '',
            pageIndex2: 1,
            pageSize2: 10,
            totalSum2: 0,
            participantData: [],
            participantList: [],
            participantListId: [],

            //多级：选择参与人
            multiVisible:false,
            checkedData:[],
            idsChecked:[],

            subjectList: [],
            subject: '',
            standardVisible: false,
            keyword3: '',
            pageIndex3: 1,
            pageSize3: 10,
            totalSum3: 0,
            standardData: [],
            standardList: [],
            standardradio: 8,
            standardradioID: '',
            standardListId: [],

            viewCriteria: false,
            viewCriteriaList: {},
            rules: {
                theme: [
                    { required: true, message: '请输入主题', trigger: 'blur' }
                ],
                ask: [
                    { required: true, message: '请输入活动要求', trigger: 'blur' }
                ],
                video: [
                    { required: true, message: '请选择评课视频', trigger: 'change' }
                ],
                startTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择结束时间', trigger: 'change' }
                ],
                participant: [
                    { type: 'array', required: true, message: '请选择参与人', trigger: 'change' }
                ],
                standard: [
                    { required: true, message: '请选择评估标准', trigger: 'change' }
                ],
                mode: [
                    { required: true, message: '请选择写算分方式', trigger: 'change' }
                ],
                range: [
                    { required: true, message: '请选择评分明细公开范围', trigger: 'change' }
                ]
            },
            showVideoPlayer: false,
            playParam: { play_url: "" },
            pickerOptions: {
                disabledDate:(time) => {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            isVideoView: false,
            // 多级-搜索条件
            org:[],
            orgData:[],
            classifyVal: '',
            videoClassify: [],
        }
    },
    computed: {
      isMulti(){
          return this.$store.getters.isMulti;
      },
    },
    created () {
        if(this.isMulti){//获取多级：评课视频弹窗，类型select数据
            this.getOrg();
            this.getVideoClassify();  
        }
    },
    watch: {
        'page_index':{
            handler(newVal) {
                this.standardData = this.standardData.slice((newVal - 1)*5, (newVal - 1)*5 + 5);
                this.standardradio = '';
            }
        },
        org:{
            handler(newVal) {
                this.pageIndex = 1
                this.getVideoData();
            },immediate:true
        }
    },
    methods: {
        standardRowClassName({row, rowIndex}){
            return (this.standardList.length > 0 && this.standardList[0].id) == row.id ? 'warning-row' : ''; 
        },
        particRowClassName({row, rowIndex}){
            return this.participantListId.includes(row.id) ? 'warning-row' : ''; 
        },
        checkParticipant(row){
            return this.participantListId.includes(row.id) ? false : true
        },
        /**
         * 禁止已有的视频重复选择
         * @DateTime 2020-06-03T14:37:19+0800
         * @qiu_m
         * @param    {[type]}                 options.row      [description]
         * @param    {[type]}                 options.rowIndex [description]
         * @return   {[type]}                                  [description]
         */
        videoRowClassName({row, rowIndex}){
            return this.videoListId.includes(row.id) ? 'warning-row' : ''; 
        },
        checkVideo(row) {
            return this.videoListId.includes(row.id) ? false : true
        },
        /**
         * row里面有id作为唯一标识
         */
        getRowKeys(row) {
            return row.id;
        },
        // 单选框，选择点击的数据
        showStandardradio(row){
            this.standardradio = this.standardData.indexOf(row);
            this.standardradioID = row.id;
        },
        /*
            提交当前的数据
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    let startTime = (new Date(this.ruleForm.startTime)).getTime();
                    let endTime = (new Date(this.ruleForm.endTime)).getTime();
                    let timestamp = (new Date()).getTime();

                    if (startTime === endTime) {
                       return this.$message.error('活动时间选项：开始时间不能和结束时间一样');
                    }else if (startTime > endTime) {
                       return this.$message.error('活动时间选项：开始时间不能大于结束时间');
                    }else if (startTime < timestamp) {
                        return this.$message.error('开始时间不能小于当前时间');
                    }

                    let success = (res => {
                        this.$message.success(res.msg)
                        this.$router.push('/netteach')
                    });

                    let params = {
                        name: this.ruleForm.theme,
                        userid: this.$g.user_id,
                        standard_id: this.ruleForm.standard.join(','),
                        profile: this.ruleForm.ask,
                        start_time: this.ruleForm.startTime,
                        end_time: this.ruleForm.endTime,
                        score_type: this.ruleForm.mode,
                        public_flag: this.ruleForm.range.join(','),
                        video_string: this.ruleForm.video.join(','),
                        user_string: this.ruleForm.participant.join(',')
                    };

                    this.$ajax.post('api/network/eva_list', params, { func: { success: success } })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /*
            @ 删除对应条件的数据
            @ video 评课视频
            @ participant 参与人数组
            @ standard 评估标准
            @ tag 一个参与人
         */
        handleClose(index, coordinate,tag) {
            switch (coordinate) {
                case 'video':
                    this.videoList.splice(index, 1);
                    this.ruleForm.video.splice(index, 1)
                    break;
                case 'participant':
                        this.participantList.splice(index, 1);
                        this.ruleForm.participant.splice(index, 1)
                    break;
                case 'standard':
                    this.standardList.splice(index, 1);
                    this.ruleForm.standard.splice(index, 1)
                    break;
            }
        },
        /*
            选择视频
         */
        selectionChange(val) {
            this.multipleSelection = val;
        },
        /*
             评课视频
         */
        submitVideo() {

            if (this.multipleSelection.length === 0) {
                this.$message.error('请选择评课视频')
                return
            } else {
                let arr = [...this.multipleSelection, ...this.videoList]

                for (let i = 0; i < arr.length; i++) {
                    this.videoList.push(arr[i])
                }
                /*去重 */
                let hash = {};
                this.videoList = this.videoList.reduceRight((item, next) => {
                    hash[next.id] ? '' : hash[next.id] = true && item.push(next);
                    return item
                }, [])
               
                this.videoVisible = false
            }
        },
        changseVideoClassify(){
            this.pageIndex = 1
            this.getVideoData()
        },

        /*
             请求视频列表数据
         */
        getVideoData(flag) {
            if(flag){
                this.videoVisible = true;
            }
            let params = {};
            if(this.isMulti){
                params = {
                    cate_id: this.classifyVal,
                    keyword: this.keyword,
                    platform_id: this.org[0],
                    grade_id: this.org[1],
                    subject_id: this.org[2],
                    page_index: this.pageIndex,
                    page_size: this.pageSize,
                    status: 1,
                    authority: 1,
                }
            }else{
                params = {
                    type: '-1',
                    status: 1,
                    page_index: this.pageIndex,
                    page_size: this.pageSize,
                    video_name: this.keyword,
                    status: 1,
                    authority: 1,
                }
            }

            let success = (res => {
                this.videoData = res.data.data;
                this.totalSum = res.data.data_sum;
                this.pageIndex = parseInt(res.data.page_index)
                this.videoListId = [];
                this.videoList.length > 0 && this.videoList.forEach(item => {
                  this.videoListId.push(item.id);
                })
            });

            this.$ajax({
                url: 'api/video/video_list',
                method: 'get',
                params: params,
                func: { success: success }
            })
        },
        sizeChange(val) {
            this.pageSize = val;
            this.getVideoData()
        },
        currentChange(val) {
            this.pageIndex = val;
            this.getVideoData()
        },
        setDisabled(obj){
            let  ext =obj.path.split('.').pop().toLocaleLowerCase();
            if (ext == 'mp4' || ext == 'mov') {
               return false
            }else{
                return true
            }
        },
        /*
             视频预览
         */
        preview(path) {
            this.isVideoView = true;
            this.showVideoPlayer = true;
            this.playParam.play_url = path;
        },
        /*
             暂停视频预览
         */
         closeVideo() {
            this.isVideoView = false;
            this.showVideoPlayer = false;
            this.playParam.play_url = "";
        },
        
        /*
           单级- 打开参与人弹窗
        */
        participantShow() {
            this.participantVisible = true;
            this.roleVal = '';
            this.keyword2 = '';
            this.getRoleList()
            this.getParticipant()
        },
        /*
           多级级- 打开参与人弹窗
        */
        participantMulti() {
            this.multiVisible = true;
            this.$nextTick(()=>{
                if(this.checkedData.length > 0){
                    this.$refs.organization.checkIds = this.idsChecked;
                    this.$refs.organization.rightData = this.checkedData;
                    this.$refs.organization.setChecked(this.idsChecked);
                }
            })
        },
        /*
           多级级- 取消--参与人
        */
        cancelCheck(item) {
			// 删除左侧选中
			this.idsChecked = this.idsChecked.filter(x => {
				return typeof x === 'string' && x.indexOf('_') > -1 ? x.split('_')[0] != item.rel_id : x != item.rel_id;
			});
			//  删除右侧选中
			let length = this.checkedData.length;
			for (let i = 0; i < length; i++) {
				let elem = this.checkedData[i];
				if (elem.app_code === item.user_app_code) {
					elem.children = elem.children.filter(x => x.rel_id != item.rel_id);
				}
			}
        },        
        /*
            请求用户角色身份
        */
        getRoleList() {
            let success = (res => {
                this.roleList = res.data;
                this.roleList.unshift({'name': '全部','id': 0})
            });

            this.$ajax({
                url: 'api/role/get_all',
                method: 'get',
                params: { status: 1 },
                func: { success: success }
            })
        },
        /*
            请求参与人数据
        */
        getParticipant() {
            let success = (res => {
                this.participantData = res.data.data;
                this.totalSum2 = res.data.data_sum;
                this.pageIndex2 = parseInt(res.data.page_index)

                this.participantListId = [];
                this.participantList.length > 0 && this.participantList.forEach(item => {
                  this.participantListId.push(item.id);
                })
            });
            this.$ajax({
                url: 'api/user/user',
                method: 'get',
                params: {
                    role_id: this.roleVal,
                    status: 1,
                    page: this.pageIndex2,
                    size: this.pageSize2,
                    data_type: 2,
                    name: this.keyword2
                },
                func: { success: success }
            })
        },
        sizeChange2(val) {
            this.pageSize2 = val;
            this.getParticipant()
        },
        currentChange2(val) {
            this.pageIndex2 = val;
            this.getParticipant()
        },
        /*
            选择视参与人
        */
        participantChange(val) {
            this.multipleSelection2 = val;
        },
        /*
             选择视参与人
         */
        submitParticipant() {

            if (this.multipleSelection2.length === 0) {
                this.$message.error('选择视参与人')
                return
            } else {
                let arr = [...this.multipleSelection2, ...this.participantList]

                for (let i = 0; i < arr.length; i++) {
                    this.participantList.push(arr[i])
                }
                /*去重 */
                let hash = {};
                this.participantList = this.participantList.reduceRight((item, next) => {
                    hash[next.id] ? '' : hash[next.id] = true && item.push(next);
                    return item
                }, [])

                this.participantVisible = false
            }
        },

        /*
            弹窗--评估标准
        */
        standardShow() {
            this.standardradio = '';
            this.standardradioID = '';
            this.standardVisible = true;
            this.subject = '';
            this.keyword3 = ''
            if(this.isMulti){
                this.getClassifyData()
            }else{
                this.getSubjectList()
            }
            this.getStandard()
        },
        toNetteach() {
            let host_addr = sessionStorage.getItem('host_addr');
            let host = host_addr.split('://')[1];
            let token = sessionStorage.getItem('redirect_params');
            let url = `${host_addr}${token}&host=${host}&routerUrl=/netteach/standard&CheckSchoolAppCode=${sessionStorage.getItem('CheckSchoolAppCode')}`
            window.open(url)
        },
        /*
            请求科目
        */
        getSubjectList() {
            let success = (res => {
                this.subjectList = res.data;
                this.subjectList.unshift({ 'id': 0, 'name': '所有科目' })
            });

            this.$ajax({
                url: 'api/cate/subject',
                method: 'get',
                params: {},
                func: { success: success }
            })
        },
        /*
            多级：获取分类
        */
        getClassifyData(){
            let success = (res=>{
                this.classifyData = res.data;
            });

            this.$ajax({
                url: 'api/network/eva_standard_classify',
                method: 'get',
                params: {},
                func: {success: success}
            })
        }, 
        changeStandard(){
            this.pageIndex3 = 1
            this.getStandard()
        },   
        /*
            请求评估标准数据
        */
        getStandard() {
            let success = (res => {
                this.standardData = res.data.data;
                this.totalSum3 = res.data.data_sum;
                this.pageIndex3 = parseInt(res.data.page_index)
            });
            this.$ajax({
                url: 'api/network/eva_standard',
                method: 'get',
                params: {
                    keyword: this.keyword3,
                    subject_id:!this.isMulti?this.subject:null,//单级
                    classify_id:this.isMulti?this.classify:null,//多级
                    page_index: this.pageIndex3,
                    page_size: this.pageSize3,
                    status: 1,
                    user_id: this.$g.user_id,

                    // data_type: 2
                },
                func: { success: success }
            })
        },
        sizeChange3(val) {
            this.pageSize3 = val;
            this.getStandard()
        },
        currentChange3(val) {
            this.pageIndex3 = val;
            this.getStandard()
        },
        /*
            选择评估标准
        */
        handleCurrentChange(val) {
           this.multipleSelection3 = []
           this.multipleSelection3.push(val);
        },
        /*
             选择视评估标准
         */
        submitStandard() {
            if (this.multipleSelection3.length === 0) {
                this.$message.error('选择视评估标准')
                return
            } else {
    
                this.standardList = this.multipleSelection3;
                this.standardVisible = false
            }
        },
        viewCriteriaShow(id) {

            this.viewCriteria = true;

            let success = (res => {
                this.viewCriteriaList = res.data
            });

            this.$ajax({
                url: 'api/network/standard_detail',
                method: 'get',
                params: { id: id },
                func: { success: success }
            })
        },
        goBack(){
            this.$confirm('评课设置暂未保存，是否返回上一页？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$router.push('/netteach')
                }).catch(() => {
                
            });
 
        },
        // 多级-获取学校-年级-班级
        getOrg(){
            this.orgData = [];
            let success = res => {
				this.orgData.push(res.data);
			};
			this.$ajax({
				url: 'api/network/get_org_subject',
				method: 'get',
                params: {
                    app_code:sessionStorage.getItem('CheckSchoolAppCode'),
                },
				func: { success: success }
			});
        },
        /*
          多级：选择参与人
         */
        checkMember(){
            this.multiVisible = false;
            let check = deep_clone(this.$refs.organization.checkIds);
            this.idsChecked = check;
            this.checkedData = deep_clone(this.$refs.organization.rightData);

            check = check.map(x => {
                return typeof x === 'string' && x.indexOf('_') > -1 ? x.split('_')[0] : x;
            })
            this.ruleForm.participant = Array.from(new Set(check));
        },
        // 多级-获取视频分类
        getVideoClassify(){
            let success = res => {
				this.videoClassify = res.data;
			};
			this.$ajax({
				url: 'api/video/video_cate',
				method: 'get',
				params: {
                    keyword:"",
                },
				func: { success: success }
			});
        },

    }
}
</script>
<style lang="scss">
.participant-container{
    background-color: #EEF4F9;
    padding: 20px;
    p{
        border-bottom: 1px solid #D5DEE5;
    }
	.tree-top-level {
		padding-bottom: 20px;
		.row {
            height: 25px;
            line-height: 25px;
            padding-top: 10px;
            font-size: 16px;
            color: black;
		}
		.el-tag {
            background-color: #fff;
            border-color: #fff;
            color: black;
			margin: 5px 10px 5px 0;
		}
        .el-tag__close{
            color: black;
        }
	}    
}

</style>